<template>
  <div class="header-title">单位logo</div>
  <div class="upload">
    <MUpload list-type="picture-card" :limit="1" :maxSize="2" v-model="fileList" style="margin-bottom: 30px"/>
    <div class="upload-tx">说明：</div>
    <div class="upload-tx">
      1、图片格式支持.<span>jpg</span>、.<span>jpeg</span>、.<span>png</span>、.<span>gif</span>；
    </div>
    <div class="upload-tx">2、图片大小不超过<span>2M</span>；</div>
    <div class="upload-tx">3、图片尺寸建议为600*600px。</div>
  </div>
  <el-button type="primary" @click="submit" :loading="loading">应用</el-button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { updateLogo, updateLogoList } from '@/api/system/globalSettings'
import { ElMessage } from 'element-plus'

onMounted(() => {
  updateLogoList().then((res) => {
    fileList.value = [
      {
        url: res.data.find((i) => i.configKey === 'sys.index.logo').configValue
      }
    ]
  })
})
const fileList = ref([])
const loading = ref(false)
const submit = () => {
  let data = {
    logoUrl: '12'
  }
  loading.value = true
  updateLogo(data)
    .then(() => {
      ElMessage.success('应用成功')
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<style scoped lang="scss">
.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  padding-bottom: 30px;
}
.upload-tx {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
  span {
    color: #46a6ff;
  }
}
.upload {
  margin-bottom: 30px;
}
</style>
